<template>
  <!-- 外层容器，用于包裹整个列表 -->
  <view>
    <!-- 动态生成列表项 -->
    <view
      class="info-item"
      :class="{ 'no-border': index === animalInfotbnr.length - 1 }"
      v-for="(item, index) in animalInfotbnr"
      :key="index"
    >
      <!-- 显示信息标题 -->
      <text class="info-label">{{ item.title }}</text>
      <!-- 如果 item.type 存在，则显示信息内容和右箭头图标 -->
      <view class="box" v-if="item.type">
        <text class="info-value">{{ item.type }}</text>
         <!-- 右箭头图标 -->
        <uv-icon name="arrow-right" color="#ebebeb" size="28"></uv-icon>
      </view>
    </view>
  </view>
</template>

<script setup>
import uvIcon from '@/uni_modules/uv-icon/components/uv-icon/uv-icon.vue';

// 定义组件的属性，接收父组件传递的数据
defineProps({
  animalInfotbnr: {
    // 指定属性类型为数组
    type: Array,
    // 标记为必需属性，父组件必须传递
    required: true
  }
});
</script>

<style scoped>
/* 基本列表项样式 */
.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
}

/* 为不包含 "no-border" 类的列表项添加底部边框 */
.info-item:not(.no-border) {
  border-bottom: 2rpx solid #f0f0f0;
}

/* 标签文本样式 */
.info-label {
  font-size: 32rpx;
}

/* 值文本样式 */
.info-value {
  font-size: 32rpx;
  color: #ccc;
}
.box {
  display: flex;
  align-items: center;
}
</style>